import { NavLink } from 'react-router-dom'
import { Switch, Route } from 'react-router-dom'

import Home from './views/Home'
import Topic from './views/Topic'
import Shows from './views/Shows'
import Video from './views/Video'

// import style from './styles/App.module.scss'
const routesCon = [
  { path: '/', component: Home, label: '首页' },
  { path: 'tit', label: '专区' },
  { path: '/topic', component: Topic, label: '话题' },
  { path: '/shows', component: Shows, label: '发布' },
  { path: 'tit', label: '发现' },
  { path: '/video', component: Video, label: '视频' },
]
export const routes = (
  <Switch>
    {routesCon.map((config, index) => {
      return <Route exact key={index} {...config} />
    })}
  </Switch>
)
export const links = (
  <ul>
    {routesCon.map(({ path, component, label }, index) => {
      if (path === 'tit') {
        return (
          <li key={index}>
            <a className="navLink" href="/">
              <span>{label}</span>
              <span className="trangle-icon"></span>
            </a>
          </li>
        )
      } else {
        return (
          <li key={index}>
            <NavLink
              exact
              to={path}
              className={(isActive) =>
                'navLink' + (isActive ? ` selected` : '')
              }
            >
              <span>{label || component.name}</span>
            </NavLink>
          </li>
        )
      }
    })}
  </ul>
)
